<template>
	<view class="content">
<!-- 		<view class="header-content">
			<uni-icons type="back" size="28" color="rgb(35, 35, 35)" @click="goBack"> </uni-icons>
		  	<view class="profile-view" :style="{'backgroundImage':'url('+category.bgimg +')'}" > <image :src="expert.avatar" class="profile-image"></image></view>
			<text class="mentor-name">{{expert.name}}</text>
		</view> -->


		<u-navbar leftIcon="" leftIconSize="0px" >
			<slot>
				<image :src="expert.avatar" class="profile-image"></image>
				<text class="mentor-name">{{expert.name}}</text>
			</slot>
		</u-navbar>

		<view style="padding: 10px;">
			<view class="banner">
				<image :src="category.topimg" class="swiperImg" style="width: 100%;" mode="widthFix" />
				<image :src="expert.avatar" class="swiperavatar" mode="widthFix" />
				<text class="swipername">{{expert.name}}</text>
			</view>
		</view>

		<view style="padding: 20px;">
			<view v-for="(text) in expert.synopsis" style="margin-top:3px;font-size: 14px;">
				{{text}}
			</view>
		</view>
		<!-- 明星导师 -->
		<view class="popularCoursesBox">
			<view class="ename">AREA OF EXPERTISE</view>
			<view class="name">擅长领域</view>
			<view class="line"></view>
			<view class="boxcon">
				{{expert.goodat}}
			</view>
		</view>
		<!-- 热门课程 -->
		<view class="popularCoursesBox">
			<view class="ename">HSP VIDEO</view>
			<view class="name">健康科普</view>
			<view class="line"></view>
		</view>
		<view class="hsp-video">
			<view class="video-thumbnails">
				<view v-for="(thumbnail, index) in lists" :key="index" class="thumbnail"
					@click="godetail(thumbnail,thumbnail.id)">
					<image :src="thumbnail.cover" class="thumbnail-image" mode="widthFix"></image>
					<view class="views-count" style="line-height: 100%;">
						<image style="width: 15px;" mode="widthFix" src="https://cdn.zkjialan.com/uploads/images/20250409/202504091547258c1ab5898.png" ></image>
						<text class="views-text" >{{ thumbnail.views }}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				expert: {},
				category: {},
				id: 0,
				baseUrl: `http://localhost:82/`,
				banner: [],
				topimage: "https://cos-a.jialanhealth.com/uploads/grow/20250314/0c3f619a8bf5ddd6cade6a2ebccd6440.png",
				lists: [],
				config: {},
			}
		},
		onShow() {
			console.log(this.isLogin);
			if (!this.isLogin) return this.$Router.push('/pages/login/login');
		},
		onLoad(option) {
			this.id = option.id
			var that = this

			this.$request.get(`course/shortvideo/getExpertInfo?id=` + this.id).then(res => {
				that.expert = res.data.data.expert
				that.category = res.data.data.category
			})

			this.$request.get(`course/shortvideo/getVideotlist?expert_id=` + this.id).then(res => {
				that.lists = res.data.data.list

				console.log(that.lists)
			})


			this.$request.get(`course/shortvideo/getConfig`).then(res => {
				that.config = res.data.data
				console.log(that.config);
			})

		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			godetail(info, id) {
				
				console.log('点击的视频',id)
				uni.setStorage({
					key: 'videoinfo',
					data: JSON.stringify(info),
				});
				
		
				this.$navto.navto('/course/videohealth/videohealth', {
					expert_id: this.id,
					video_id: id,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ename {
		font-size: 26px;
		font-weight: bold;
	}

	.name {
		font-size: 16px;
		font-weight: bold;
	}

	.banner {
		position: relative;
	}

	.swiperavatar {
		position: absolute;
		right: 0px;
		bottom: 3px;
		width: 50%;
	}

	.swipername {
		position: absolute;
		left: 10%;
		top: 40%;
		font-size: 40rpx;
		font-weight: bold;
	}

	.boxcon {
		padding: 21px 10px;
		font-size: 14px;
	}

	.header-content {
		display: flex;
		align-items: center;
		padding: 0px 20px 0px 10px;
		background-color: #fff;
		// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
    .profile-view{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-left: 20px;
		background-size: cover;
	}

	.profile-image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		// margin-left: 20px;
	}

	.mentor-name {
		 font-family: "AlibabaPuHuiTiR";
		font-size: 16px;
		margin-left: 20px;
		 color: rgba(20, 20, 20, 0.502);
	}



	.nav-buttons button {
		width: 30px;
		height: 30px;
		border: none;
		background-color: transparent;
		cursor: pointer;
	}

	.main-content {
		padding: 20px;
	}

	.content {
		// padding-top: 44px;
		padding-bottom: 74px;
	}

	.container {
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap;
		/* 自动换行 */
		justify-content: center;
		/* 水平居中 */
	}

	/* 外层正方形容器 */
	.square {
		width: calc(50% - 31px);
		/* 计算宽度：一半减去间距和边距 */
		position: relative;
		margin: 5px;
		/* 上下左右的间距 */
		box-sizing: border-box;
		/* 确保padding和border不会影响大小 */
	}

	/* 使用padding-top实现正方形 */
	.square::before {
		content: '';
		display: block;
		padding-top: 100%;
		/* 高度等于宽度 */
	}

	.line {
		width: 670rpx;
		height: 1rpx;
		background-color: #dcdcdc;
		margin-top: 40rpx;
	}


	.popularCoursesBox {
		position: relative;
		width: 100%;
		margin-top: 60rpx;

		padding: 0px 20px;

		.popularCoursesImg {
			width: 450rpx;
			height: 93rpx;
		}
	}


	/deep/ page {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #fff !important;
		padding-bottom: 0 !important;
	}

	//视频css
	.section-title {
		font-size: 24px;
		margin-bottom: 10px;
	}

	.section-subtitle {
		font-size: 18px;
		margin-bottom: 5px;
	}





	.thumbnail-image {
		width: 100%;
		/* 保留此样式 */
		height: auto;
		/* 保留此样式 */
	}

	// .video-thumbnails {
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	// gap: 3px;          /* 封面之间3px间隙 */
	// 	padding: 0;
	// 	/* 父容器无内边距 */
	// 	margin: 0;
	// 	/* 父容器无外边距 */
	// 	width: 100%;
	// 	/* 确保占满整个宽度 */
	// }

	// /* 确保父容器支持绝对定位 */
	// .thumbnail {
	// 	position: relative;
	// 	width: 33.33%;
	// 	text-align: center;
	// }
// .video-thumbnails {
//   display: flex;
//   flex-wrap: wrap;
//   justify-content: space-between; /* 确保子元素之间的间距均匀 */
//   padding: 0;
//   margin: 0;
//   width: 100%;
// }

// .thumbnail {
//   position: relative;
//   width: 32%; /* 确保三个元素能在一行显示 */
//   margin-bottom: 1px; /* 设置底部间距 */
//   text-align: center;
// }

.video-thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  width: 100%;
}

.thumbnail {
  position: relative;
  width: calc(33.33% - 1px); /* 减去间距 */
  margin-bottom: 0px; /* 设置底部间距 */
  text-align: center;
}

// .thumbnail:nth-child(3n + 1) {
//   margin-left: 0; /* 第一个元素和每行第一个元素左边距为0 */
// }

// .thumbnail:nth-child(3n) {
//   margin-right: 0; /* 每行最后一个元素右边距为0 */
// }

	.views-count {
		position: absolute;
		bottom: 10px;
		left: 4px;
		// background-color: rgba(0, 0, 0, 0.6); 
		color: white;

		border-radius: 3px;
		font-size: 12px;
		/* 小号字体 */
		font-weight: bold;
		/* 加粗，更显眼 */
		opacity: 0.7;
		/* 在 .views-count 中添加 */
		justify-content: center;
		/* 水平居中 */

		display: flex;
		/* 启用 Flex 布局 */
		align-items: center;
		/* 垂直居中对齐 */
		padding: 4rpx 8rpx;
		/* 可选：添加内边距 */
		border-radius: 12rpx;

	}

	.views-text {
		font-size: 18rpx;
		/* 调整文字大小（根据需求） */
		color: white;
		/* 文字颜色 */
		// line-height: 1;
		margin-left: 5px;
		margin-top: 2px;
		/* 行高与图标高度匹配 */
	}



	/* 确保父级容器无边距 */
	.hsp-video {
		padding: 0;
		margin: 0;
		margin-top: 30px;
	}
</style>